<template>
  <div>
    <a-modal title="SEO分析"
             :visible="visible"
             @ok="handleOk"
             :confirmLoading="confirmLoading"
             @cancel="handleCancel">

      <a-list itemLayout="horizontal"
              :loading="confirmLoading"
              :dataSource="dataSource">
        <a-list-item slot="renderItem"
                     slot-scope="item, index">
          <a-list-item-meta>
            <a slot="description"
               v-html="item.res">
            </a>
            <a slot="title">{{item.title}}</a>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
      <div v-if="dataSource.length>0">
        <a-divider dashed />
        检测评分：<br />
        <a-rate v-model="value" />
      </div>
    </a-modal>
  </div>
</template>
<script>
import { analysis } from '@/api/cms/content'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      value: 0,
      dataSource: [
      ]
    }
  },
  methods: {
    analysis(id) {
      this.visible = true
      this.confirmLoading = true
      analysis({ id: id }).then(response => {
        if (response.code === 0) {
          this.setDataShow(response.res)
        }
      })
    },
    setDataShow(res) {
      this.dataSource = []
      this.value = res.star
      if (res.remark && res.remark.length > 0) {
        const msg = {}
        msg.title = '提取关键字检测'
        if (res.remark.length === 1) {
          msg.res = "<span style='color:red'>" + res.remark + '</span>'
          msg.ckRes = false
        } else {
          msg.res = "<span style='color:green'>" + res.remark + '</span>'
          msg.ckRes = true
        }
        this.dataSource.push(msg)
      }
      if (res.title) {
        const msg = {}
        msg.title = '网页标题检测'
        msg.res = res.title
        msg.ckRes = res.title.indexOf('color:green') >= 0
        this.dataSource.push(msg)
      }
      if (res.keyWords) {
        const msg = {}
        msg.title = '网页关键字检测'
        msg.res = res.keyWords
        msg.ckRes = res.keyWords.indexOf('color:green') >= 0
        this.dataSource.push(msg)
      }
      if (res.description) {
        const msg = {}
        msg.title = '网页描述检测'
        msg.res = res.description
        msg.ckRes = res.description.indexOf('color:green') >= 0
        this.dataSource.push(msg)
      }
      if (res.script) {
        const msg = {}
        msg.title = '网页JS检测'
        msg.res = res.script
        msg.ckRes = res.script.indexOf('color:green') >= 0
        this.dataSource.push(msg)
      }

      if (res.record) {
        const msg = {}
        msg.title = '百度收录检测'
        msg.res = res.record.ok ? '<span style="color:green">已被收录</span>' : '<span style="color:red">未被收录</span>'
        msg.ckRes = res.record.ok
        this.dataSource.push(msg)
      }
      this.confirmLoading = false
    },
    handleOk(e) {
      this.handleCancel()
    },
    handleCancel(e) {
      this.visible = false
      this.dataSource = []
      this.value = 0
      this.confirmLoading = false
    }
  }
}
</script>
